/** 拖拽元素 */
export interface DragElement extends HTMLElement {
  /** 节点是否初始化事件 */
  __drag_resize_init?: boolean
}

/** 拖拽盒子数据 */
export interface DragBox {
  /** 宽度 */
  w: number | string
  /** 高度 */
  h: number | string
  /** 水平坐标 */
  x: number
  /** 垂直坐标 */
  y: number
  /** 最小宽度 */
  minW: number
  /** 最大宽度 */
  maxW: number
  /** 最小高度 */
  minH: number
  /** 最大高度 */
  maxH: number
  /** CSS3 缩放 */
  scale: number | number[]
  /** zoom 外部节点缩放，无需当前节点 */
  zoom: number
}

/** 拖拽盒子默认选项 */
export const DragBoxDefault: DragBox = {
  w: 200,
  h: 200,
  x: 0,
  y: 0,
  minW: 0,
  maxW: Infinity,
  minH: 0,
  maxH: Infinity,
  scale: 1,
  zoom: 1
}

/** 拖拽状态，用以记录操作时的状态 */
export interface DragState {
  /** 是否激活 */
  active: boolean
  /** 是否限定移动范围为父元素，如果为 string 则指定 parent 节点 */
  parent: boolean | string
  /** 是否限定调整大小范围为父元素 */
  resizeParent: boolean
  /** 是否以中心点位置调整大小 */
  resizeAtCenter: boolean
  /** 宽度 */
  w: number
  /** 高度 */
  h: number
  /** X 坐标 */
  x: number
  /** Y 坐标 */
  y: number
  /** 父节点宽度 */
  pw: number
  /** 父节点高度 */
  ph: number
  /** 更新状态 */
  update: () => void
}

/** 拖拽坐标轴 */
export enum DragAxis {
  /** X 轴 */
  X = 'x',
  /** Y 轴 */
  Y = 'y',
  /** 都支持 */
  BOTH = 'both'
}

/** 移动范围 */
export interface MoveRange {
  /** 最小水平坐标 */
  minX: number
  /** 最大水平坐标 */
  maxX: number
  /** 最小水平坐标 */
  minY: number
  /** 最大水平坐标 */
  maxY: number
}

/** 移动中数据 */
export interface MovingData {
  /** 实时 x 坐标 */
  x: number
  /** 实时 y 坐标 */
  y: number
  /** 拖拽移动水平距离 */
  moveX: number
  /** 拖拽移动垂直距离 */
  moveY: number
}

/** 调整大小数据 */
export type ResizeData = Pick<DragState, 'x' | 'y' | 'w' | 'h'>

/** 调整大小范围 */
export interface ResizeRange extends MoveRange {
  /** 最小宽度 */
  minW: number
  /** 最大宽度 */
  maxW: number
  /** 最小高度 */
  minH: number
  /** 最大高度 */
  maxH: number
}

/** 调整大小句柄 */
export enum ResizeHandle {
  /** 上左 */
  TL = 'tl',
  /** 上中 */
  TC = 'tc',
  /** 上右 */
  TR = 'tr',
  /** 左中 */
  LM = 'lm',
  /** 右中 */
  RM = 'rm',
  /** 下左 */
  BL = 'bl',
  /** 下中 */
  BC = 'bc',
  /** 下右 */
  BR = 'br'
}

/** 所有调整大小句柄值 */
export const ResizeHandles = Object.values(ResizeHandle)

/** 中间的句柄 */
export const MiddleHandles = [ResizeHandle.TC, ResizeHandle.RM, ResizeHandle.BC, ResizeHandle.LM]

/** 顶部的句柄 */
export const TopHandles = [ResizeHandle.TL, ResizeHandle.TC, ResizeHandle.TR]

/** 底部的句柄 */
export const BottomHandles = [ResizeHandle.BL, ResizeHandle.BC, ResizeHandle.BR]

/** 左边的句柄 */
export const LeftHandles = [ResizeHandle.TL, ResizeHandle.LM, ResizeHandle.BL]

/** 右边的句柄 */
export const RightHandles = [ResizeHandle.TR, ResizeHandle.RM, ResizeHandle.BR]
